<template>
	<uni-popup ref="popup" type="center" @change="changePopup" :safe-area="false" style="z-index: 999;">
		<view class="popup-content">
			<image class="content-background" src="/static/image/red-envelope-max.png"></image>
			<view class="content-info">
				<text class="content-info-nick">{{nickName(dataInfo?.userId,dataInfo?.userName)}}</text>
				<text class="content-info-text">发出的红包</text>
				
				<!--普通红包-->
				<template v-if="dataInfo?.mode === 0">
					<!--红包有效-->
					<template v-if="dataInfo?.status === 0">
						<!--有效 未领取过-->
						<template v-if="dataInfo?.collect === 0">
							<text class="content-info-remark">{{dataInfo?.remark}}</text>
						</template>
						<!--有效 部分领取-->
						<template v-if="dataInfo?.collect === 1">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">{{dataInfo?.remark}}</text>
							</template>
						</template>
						<!--有效 已领完-->
						<template v-if="dataInfo?.collect === 2">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">手慢了，红包抢光了</text>
							</template>
						</template>
						
					</template>
					<!--红包失效-->
					<template v-if="dataInfo?.status === 1">
						<!--失效 未领取过-->
						<template v-if="dataInfo?.collect === 0">
							<text class="content-info-remark">红包已过期</text>
						</template>
						<!--失效 部分领取-->
						<template v-if="dataInfo?.collect === 1">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">红包已过期</text>
							</template>
						</template>
						<!--失效 已领完-->
						<template v-if="dataInfo?.collect === 2">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">手慢了，红包抢光了</text>
							</template>
						</template>
					</template>
				</template>
				<!--拼手气红包-->
				<template v-if="dataInfo?.mode==1">
					<!--红包有效-->
					<template v-if="dataInfo?.status === 0">
						<!--有效 未领取过-->
						<template v-if="dataInfo?.collect === 0">
							<text class="content-info-remark">{{dataInfo?.remark}}</text>
						</template>
						<!--有效 部分领取-->
						<template v-if="dataInfo?.collect === 1">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">{{dataInfo?.remark}}</text>
							</template>
						</template>
						<!--有效 已领完-->
						<template v-if="dataInfo?.collect === 2">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">手慢了，红包抢光了</text>
							</template>
						</template>
					</template>
					<!--红包失效-->
					<template v-if="dataInfo?.status === 1">
						<!--失效 未领取过-->
						<template v-if="dataInfo?.collect === 0">
							<text class="content-info-remark">红包已过期</text>
						</template>
						<!--失效 部分领取-->
						<template v-if="dataInfo?.collect === 1">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">红包已过期</text>
							</template>
						</template>
						<!--失效 已领完-->
						<template v-if="dataInfo?.collect === 2">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">手慢了，红包抢光了</text>
							</template>
						</template>
					</template>
				</template>
				<!--专属红包-->
				<template v-if="dataInfo?.mode==2">
					<!--红包有效-->
					<template v-if="dataInfo?.status === 0">
						<!--是否是给我的红包-->
						<template v-if="dataInfo?.directUserId == userData.id">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">{{dataInfo?.remark}}</text>
							</template>
						</template>
						<template v-else>
							<text class="content-info-remark">仅{{nickName(dataInfo?.directUserId,dataInfo?.directUserName)}}可领取</text>
						</template>
					</template>
					<!--红包失效-->
					<template v-if="dataInfo?.status === 1">
						<!--是否是给我的红包-->
						<template v-if="dataInfo?.directUserId == userData.id">
							<!--本人已领取-->
							<template v-if="dataInfo?.isUse == true">
								<text class="content-info-remark">你已领取</text>
							</template>
							<!--本人未领取-->
							<template v-else>
								<text class="content-info-remark">红包已过期</text>
							</template>
						</template>
						<template v-else>
							<text class="content-info-remark">仅{{nickName(dataInfo?.directUserId,dataInfo?.directUserName)}}可领取</text>
						</template>
					</template>
				</template>
				<!--个人红包-->
				<template v-if="dataInfo?.mode==null">
					<!--红包有效-->
					<template v-if="dataInfo?.status === 0">
						<!--本人已领取-->
						<template v-if="dataInfo?.isUse == true">
							<text class="content-info-remark">你已领取</text>
						</template>
						<!--本人未领取-->
						<template v-else>
							<text class="content-info-remark">{{dataInfo?.remark}}</text>
						</template>
					</template>
					<!--红包失效-->
					<template v-if="dataInfo?.status === 1">
						<!--本人已领取-->
						<template v-if="dataInfo?.isUse == true">
							<text class="content-info-remark">你已领取</text>
						</template>
						<!--本人未领取-->
						<template v-else>
							<text class="content-info-remark">红包已过期</text>
						</template>
					</template>
				</template>
				<!--普通红包-->
				<template v-if="dataInfo?.mode === 0">
					<template v-if="userData.id != dataInfo?.userId">
						<template v-if="dataInfo?.status === 0 && dataInfo?.collect !== 2 && !dataInfo?.isUse">
							<image class="content-info-button" :class="{active:active}" @tap="rob" src="/static/image/red-envelope-button.png"></image>
						</template>
					</template>
				</template>
				<!--拼手气红包-->
				<template v-if="dataInfo?.mode === 1">
					<template v-if="dataInfo?.status === 0 && dataInfo?.collect !== 2 && !dataInfo?.isUse">
						<image class="content-info-button" :class="{active:active}" @tap="rob" src="/static/image/red-envelope-button.png"></image>
					</template>
				</template>
				<!--专属红包-->
				<template v-if="dataInfo?.mode === 2">
					<template v-if="userData.id != dataInfo?.userId">
						<template v-if="dataInfo?.status === 0 && dataInfo?.collect !== 2 && !dataInfo?.isUse">
							<image class="content-info-button" :class="{active:active}" @tap="rob" src="/static/image/red-envelope-button.png"></image>
						</template>
					</template>
				</template>
				<!--个人红包-->
				<template v-if="dataInfo?.mode == null">
					<template v-if="userData.id != dataInfo?.userId">
						<template v-if="dataInfo?.status === 0 && dataInfo?.collect !== 2 && !dataInfo?.isUse">
							<image class="content-info-button" :class="{active:active}" @tap="rob" src="/static/image/red-envelope-button.png"></image>
						</template>
					</template>
				</template>
			</view>
			<!--普通红包-->
			<template v-if="dataInfo?.mode === 0">
				<template v-if="userData.id == dataInfo?.userId">
					<text @tap="goRedDetailss" class="content-detail">查看领取详情</text>
				</template>
				<template v-else>
					<template v-if="dataInfo?.status !== 0 || dataInfo?.collect === 2 || dataInfo?.isUse">
						<text @tap="goRedDetailss" class="content-detail">查看领取详情</text>
					</template>
				</template>
			</template>
			<!--拼手气红包-->
			<template v-if="dataInfo?.mode === 1">
				<template v-if="dataInfo?.status !== 0 || dataInfo?.collect === 2 || dataInfo?.isUse">
					<text @tap="goRedDetailss" class="content-detail">查看领取详情</text>
				</template>
			</template>
			<!--专属红包-->
			<template v-if="dataInfo?.mode === 2">
				<template v-if="userData.id == dataInfo?.userId">
					<text @tap="goRedDetailss" class="content-detail">查看领取详情</text>
				</template>
				<template v-else>
					<template v-if="dataInfo?.status !== 0 || dataInfo?.collect === 2 || dataInfo?.isUse">
						<text @tap="goRedDetailss" class="content-detail">查看领取详情</text>
					</template>
				</template>
			</template>
			<!--个人红包-->
			<template v-if="dataInfo?.mode == null">
				<template v-if="userData.id == dataInfo?.userId">
					<text @tap="goRedDetailss" class="content-detail">查看领取详情</text>
				</template>
				<template v-else>
					<template v-if="dataInfo?.status !== 0 || dataInfo?.collect === 2 || dataInfo?.isUse">
						<text @tap="goRedDetailss" class="content-detail">查看领取详情</text>
					</template>
				</template>
			</template>
		</view>
	</uni-popup>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import { robRed,queryRedByCode } from "@/api/api";
import BigNumber from "bignumber.js";
import { userData as userDataStore } from "@/store/userData";
import { imStore } from "@/store/imStore";

const IM_STORE = imStore();
const userData: any = userDataStore();
const popup = ref();
const dataInfo:any = ref();
const redId = ref('')
const open = (id:any) => {
	redId.value = id
	loadData()
	popup.value.open();
	
}
//获取红包详情信息
const loadData = () => {
	queryRedByCode({redId:redId.value}).then((res:any) => {
		if(res.success){
			let dataJson = res.data;
			//红包领取情况 0：未领，1：部分领，2：已领完
			let collect = 0;
			//判断红包当前领用情况
			if(dataJson.redRobRecords.length === 0)collect = 0
			if(dataJson.redRobRecords.length < dataJson.number)collect = 1
			if(dataJson.redRobRecords.length === dataJson.number)collect = 2
			//本人是否领用
			let isUse = false;
			let found = dataJson.redRobRecords.find((item:any) => item.userId == userData.id);
			//判断当前用户是否领用
			if (found) {  
			  isUse = true
			} else {  
			  isUse = false
			}
			
			dataJson.isUse = isUse;
			dataJson.collect = collect;
			dataInfo.value = dataJson
			
			//储存状态
			let status = 0;
			if(isUse){
				status  = 1
			}else{
				if(collect === 2){
					status = 2
				}else{
					if(dataJson.status === 0){
						status = 0
					}
					if(dataJson.status === 1){
						status = 4
					}
				}
			}
			if(status !== 0){
				let key = dataJson.redId + userData.id
				uni.setStorageSync(key , status);
				emit("refreshDate");
			}
		}
	})
}
const close = () => {
	popup.value.close();
}
const active = ref(false)
const emit = defineEmits(["refreshDate"])
const rob = () => {
	if(active.value)return
	active.value = true
	let timestampStart = Date.now(); // 获取当前时间的毫秒时间戳
	robRed({redId:dataInfo.value.redId}).then((res:any) => {
		let timestampEnd = Date.now(); // 获取当前时间的毫秒时间戳
		//计算出请求所用时间
		let requestTime = BigNumber(timestampEnd).minus(BigNumber(timestampStart)).toNumber()
		if(res.success){
			//客户端存储红包领取状态
			let key = dataInfo.value.redId + userData.id
			uni.setStorageSync(key , res.data.status);
			if(requestTime<500){
				let time = BigNumber(500).minus(BigNumber(requestTime)).toNumber()
				setTimeout(()=>{
				   handleResult(res)
				},time)
			}else{
				handleResult(res)
			}
			
		}
	})
}
//请红包结果处理
//handleResult
	
const handleResult = (res:any) => {
	if(res.data.status==1){
		goRedDetailss()
		//loadData()
		//isButton.value = false
		//emit("refreshDate");
	}else{
		//isButton.value = true
		loadData()
	}
}
const goRedDetailss = () => {
	uni.navigateTo({
		url: `/pages/redDetails/redDetails?redId=${dataInfo.value.redId}`,
		success: () => {
			close()
		}
	});
}
const changePopup = (event:any) => {
	if(!event.show){
		active.value = false
	}
}
//获取备注名称
const nickName = (userId:string,nick:string) => {
	let remark = null;
	let nameCard = null;
	IM_STORE.friends.forEach((f: any) => {
		if (f.userID === userId) {
			remark = f.remark;
		}
	});
	let type  = IM_STORE?.conversation?.type;
	if (type === "GROUP") {
		let userData:any = IM_STORE?.groupMembers.find((item:any) => item.userID === userId);
		if(userData?.nameCard !='')nameCard = userData?.nameCard
	}
	return remark || nameCard || nick;
};
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.popup-content{
	width: 530rpx;
	height: 888rpx;
	position: relative;
	background-color: rgb(0, 0, 0, 0);
	.content-background{
		position: absolute;
		top: 0;
		left: 0;
		width: 530rpx;
		height: 888rpx;
		z-index: 10;
	}
	.content-info{
		position: absolute;
		top: 0;
		left: 0;
		width: 530rpx;
		height: 888rpx;
		z-index: 15;
		align-items: center;
		.content-info-nick{
			padding-top: 125rpx;
			font-family: PingFangSC, PingFang SC;
			font-size: 32rpx;
			color: #FFFFFF;
			text-shadow: 0px 2px 4px #BA2F0E;
			text-align: center;
		}
		.content-info-text{
			font-family: PingFangSC, PingFang SC;
			font-size: 32rpx;
			color: #FFFFFF;
			text-shadow: 0px 2px 4px #BA2F0E;
			text-align: center;
		}
		.content-info-remark{
			padding-top: 100rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
			text-align: center;
		}
		.content-info-button{
			margin-top:130rpx;
			width: 220rpx;
			height: 220rpx;
			transition: transform 0.5s linear;
			&.active{
				transform: rotateY(360deg);
			}
		}
		
	}
	.content-detail{
		z-index: 15;
		position: absolute;
		width: 530rpx;
		left: 0;
		bottom: 80rpx;
		
		font-family: PingFangSC, PingFang SC;
		font-size: 28rpx;
		color: #FFFFFF;
		text-shadow: 0px 2px 4px #BA2F0E;
		text-align: center;
	}
}
</style>